<template>
  <view class="container bh-row bh-justify-start">
    <image class="left-img" :src="item.facadePicture.split(',')[0]" mode="scaleToFill" />
    <view class="right-wrap bh-col">
      <view class="ritht-title-wrap bh-row mb10">
        <view class="right-title">{{title}}</view>
      </view>
      <view class="right-area-wrap bh-row mb10">
        <view class="right-area">{{ item.area }}</view>
      </view>

      <view v-if="item.labelDtoList && item.labelDtoList.length > 0" class="right-label-wrap bh-row mb10">
				<view v-for="(item1, index1) in item.labelDtoList" :key="index1" v-show="index1<3" class="right-label f24 mr10">{{ item1.labelName }}</view>
			</view>
      <!-- <view class="right-label-wrap bh-row">
        <view class="right-label">临近学校</view>
        <view class="right-label">月利润10万</view>
      </view> -->
      <view class="right-rent-wrap bh-row">
        <view class="right-rent fw600 mr20 f24">租</view>
        <view class="right-rent-money fw600 f34">{{ getSimpleAmount(item.rent) }}</view>
        <view class="right-rent-unit">/月</view>
      </view>
    </view>
  </view>
</template>
<script>
import { PostUtils } from '@/components/post_item/post_add_sell_dto';
import { commonMixin } from '@/components/custom_views/mixin';
export default {
  options: { styleIsolation: 'shared' },
  name: 'postItemSellNew',
  mixins: [commonMixin],
  components: {
  },
  props: {
    item: {
      type: Object,
      default: function () {
        return {};
      }
    }
  },
  data() {
    return {
    }
  },
  methods: {
  },
  computed: {
    title() {
			return PostUtils.getTitle(this.item)
		},
  }
}
</script>
<style scoped lang="scss">
@import url(../../static/css/base.css);

.container {
  border-radius: 8rpx;
  margin-bottom: 30rpx;
  background: #FFFFFF;
}

.left-img {
  width: 220rpx;
  height: 192rpx;
  border-radius: 8rpx;
  display: block;
}

.right-wrap {
  color: #333333;
  font-weight: 500;
  font-size: 32rpx;
  margin-left: 22rpx;

  .right-title-wrap {
    font-size: 32rpx;
    font-weight: 500;
    color: #333333;
    margin-bottom: 22rpx;

    .right-title {}
  }

  .right-area-wrap {
    // margin-bottom: 22rpx;
    font-size: 24rpx;
    font-weight: normal;

    color: #999999;

    .right-area {}
  }

  .right-label-wrap {
    // margin-top: 30rpx;
    // margin-bottom: 22rpx;
    .right-label {
      border-radius: 4rpx;
      background: #F5F6F6;
      padding: 8rpx 16rpx;
	  white-space: nowrap;
      font-size: 22rpx;
      font-weight: 600;
      color: #666;
    }
  }

  .right-rent-wrap {
    font-size: 24rpx;
    font-weight: normal;
    margin-right: 16rpx;
    // margin-bottom: 30rpx;
    color: #F87147;

    .right-rent {

      width: 34rpx;
			height: 34rpx;
			text-align: center;
			border-radius: 4rpx;
			box-sizing: border-box;
			border: 1px solid #F87147;
			font-size: 20rpx;
			color: #F87147;
			font-weight: 600;

      // border-radius: 4rpx;
      // opacity: 1;

      // box-sizing: border-box;
      // border: 1px solid #F87147;
      // padding: 2rpx 4rpx 3rpx 2rpx;
      // font-size: 24rpx;
      // font-weight: normal;

      // color: #F87147;
    }

    .right-rent-money {
      font-size: 24rpx;
      font-weight: 600;
      color: #F87147;
    }

    .right-rent-unit {
      font-weight: 400;
      font-size: 24rpx;
      color: #F87147;
    }
  }
}</style>